<template>
    <div class="hot">

        <van-nav-bar :border="false">
     <template #right>
       <div style="color: gray;">更多&emsp;></div>
     </template>
     <template #left>
       <div style="font-weight: bold; font-size: 18px;">热销榜</div>
     </template>
</van-nav-bar>

<div class="artbottom">
            <div class="box2" v-for="(v,index) in img" :key="index">
                <img :src="v" alt="">
                <span class="name">{{ text[index] }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { NavBar } from 'vant';

Vue.use(NavBar);
export default {
    data(){
        return{
            img:"",
            text:""
        }
    },
    mounted(){
        this.$http({
        url:"http://localhost:3000/HotList",
        method:"get",
    }).then(res=>{
        // console.log(res.data[0].data);
        this.img=res.data[0].data.img
        this.text=res.data[0].data.text
        // console.log(res.data[0].data.befor);
        // this.timetext=res.data[0].data.timetext
        // this.timeimg=res.data[0].data.timeimg
        // this.hotmoney=res.data[0].data.hotmoney
        // this.befor=res.data[0].data.befor
    })
    }
}
</script>

<style scoped>
 .artbottom {
  height: 150px;
  display: flex;
  overflow: auto;
}
 .artbottom .box2 {
  width: 200px;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-shrink: 1;
  background-color: white;
  margin-left: 10px;
  padding: 0 5px 0 5px;
  border-radius: 10px;
}
 .artbottom .box2 img {
    height: 50%;
    width: 200;
    margin-top: -20px;

}
 .artbottom .box2 h3 {
  color: #f2270c;
  font-weight: bold;
}

.name{
    width: 100%;
    height: 20px;
    overflow: hidden;
    color: gray;
    margin-top: -45px;
}
.hot{
    margin-bottom: 10px;
}

</style>